<template>
	<view class="">
		<view class="he1 w100pc"></view>
		<!-- 头部 -->
		<view class="fsb lrmg-40" style="height: 100rpx;">
			<tabbar type="2"></tabbar>
			<view class="flex aic">
				<view class="gray272 bold500 f30 over" style="width: 200rpx;">...{{jiequten(getLoginInfo.user)}}</view>
				<!-- <view class="bg-272 bra60 fcc rel" style="padding: 15rpx 20rpx;" @click="show = !show">
					<view class="mg-r-10 fff">{{tab[flag]}}</view>
					<image src="/static/image/3.png" style="width:30rpx;height:30rpx" class=""></image>
					<view class="one1 bg-272 bra30" v-if="show">
						<view class="mg-b-30 fcc" v-for="(it,i) in tab" :key="i" @click.stop="dianji(i)">
							<view class="fff mg-r-10">{{it}}</view>
							<image src="/static/image/4.png" style="width:30rpx;height:25rpx" class="" v-if="i == flag"></image>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="he3 w100pc"></view>
		<!-- 轮播 -->
		<u-swiper :list="lists" height="400" :effect3d="true" border-radius="20"></u-swiper>
		<view class="he4 w100pc"></view>
		<view class="lrmg-40 bg-272 tmpadd-20 fsa bra20" @tap="pageto('/pages/kuangji/shouyi')">
			<!-- <view class="flex aic" @tap="pageto('/pages/kuangji/order')">
				<image src="/static/image/12.png" style="width:48rpx;height:59rpx" class=""></image>
				<view class="f30 fff mg-l-30">我的訂單</view>
			</view> -->
			<view class="flex aic">
				<image src="/static/image/13.png" style="width:54rpx;height:61rpx" class=""></image>
				<view class="f30 fff mg-l-30">收益明細</view>
			</view>
		</view>
		<view class="lrmg-40">
			<view class="mg-t-40 middle rel" v-for="(it,i) in list" :key="i">
				<view class="btn1 bg1">{{it.label}}</view>
				<view class="he4 w100pc"></view>
				<view class="fsb">
					<view class="flex aic">
						<image :src="getRequestUrl + it.pic" style="width:97rpx;height:97rpx" class=""></image>
						<view class="gray333 f26 weight mg-l-40">{{it.label}}{{it.name}}</view>
					</view>
					<u-button type="primary" :ripple="true" :custom-style="customStyles" @tap="goumai(it)">購買</u-button>
				</view>
				<view class="mg-t-60 fsa f26">
					<view class="fdc aic">
						<view class="grayc4">算力</view>
						<view class="gray333 mg-t-20">{{it.total_num}} G</view>
					</view>
					<view class="fdc aic">
						<view class="grayc4">價格</view>
						<view class="gray333 mg-t-20">{{it.price}} {{it.currency == 1 ? 'USDT' : 'MMST'}}</view>
					</view>
					<view class="fdc aic">
						<view class="grayc4">庫存</view>
						<view class="gray333 mg-t-20">{{Number(it.total_num) - Number(it.surplus_num)}}</view>
					</view>
					<view class="fdc aic">
						<view class="grayc4">有效期</view>
						<view class="gray333 mg-t-20">{{it.validity_time}}天</view>
					</view>
				</view>
			</view>
		</view>
		<view class="he3 w100pc"></view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		<view class="he3 w100pc"></view>
		<u-popup v-model="showtab" mode="bottom" :mask-close-able="true" :border-radius="20">
			<view style="background: #fff;">
				<view class="w100pc" style="height: 60rpx;"></view>
				<view class="btn1 bg1">{{obj_item.label}}</view>
				<view class="" style="padding: 50rpx;">
					<view class="flex aic">						
						<image :src="getRequestUrl + obj_item.pic" style="width:97rpx;height:97rpx" class=""></image>
						<view class="gray333 f40 weight mg-l-40">{{obj_item.label}}{{obj_item.name}}</view>					
					</view>
					<view class="mg-t-40 pd-b-30 fsb" style="border-bottom: 1rpx solid rgba(0, 0, 0, .2);">
						<view class="gray333 f40">{{obj_item.price}} </view>
						<view class="f30" style="color: #131519;">{{obj_item.currency == 1 ? 'USDT' : 'MMST'}}</view>
					</view>
					<view class="mg-t-40 fsb f26">
						<view class="gray333">算力：{{obj_item.total_num}}G</view>
						<view class="gray333">庫存：{{Number(obj_item.total_num) - Number(obj_item.surplus_num)}}</view>
						<view class="gray333">有效期：{{obj_item.validity_time}}天</view>
					</view>
					<view class="mg-t-40 flex jc-end">
						<u-number-box v-model="value" :min="1" @change="valChange"></u-number-box>
					</view>
					<view class="fsb mg-t-40">
						<view class="" style="color: #131519;">支付方式</view>
						<view class="flex aic" style="color: #131519;">
							<view class="mg-r-10 yuan"></view>
							<view class="mg-r-10">{{obj_item.currency == 1 ? 'USDT' : 'MMST'}}</view>
							<!-- <u-icon name="arrow-right" size="18" color="#333333"></u-icon> -->
						</view>
					</view>
					<view class="f24 grayc4 mg-t-20" style="text-align: right;">余额：{{obj_item.currency == 1 ? userInfo.usdt + ' USDT' : userInfo.lcc + ' MMST'}}</view>
					<view class="w100pc" style="height: 60rpx;"></view>					
					<u-button type="primary" :ripple="true" :custom-style="customStyle" @click="submit">購買</u-button>
				</view>
			</view>
		</u-popup>
		<u-picker mode="selector" v-model="show1"  :default-selector="[0]" :range="selector1" @confirm="xuanze1"></u-picker>
	</view>
</template>

<script>
	var	that
	import tabbar from "../../components/tabbar/tabbar.vue"
	import {
		_updataTabBar,
		pageto,
		pageback
	} from "../../common/js/sysfun.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default{
		data(){
			return{
				show1: false,
				selector1: [1, 2, 3],
				showtab:false,
				customStyles: {
					color: '#000',
					background:'linear-gradient(0deg, #FFC84B 0%, rgba(252,219,149,0.97) 100%)',
					width:'155rpx',
					height:'61rpx',
					fontWeight:'bold',
					fontSize:'30rpx',
					borderRadius:'60rpx',
					margin:'0'
				},
				customStyle: {
					color: '#000',
					background:'linear-gradient(0deg, #FFC84B 0%, rgba(252,219,149,0.97) 100%)',
					width:'100%',
					height:'80rpx',
					fontWeight:'bold',
					fontSize:'30rpx',
					borderRadius:'60rpx',
					margin:'0'
				},
				statusBar:false,
				tab:['中文繁体','English'],
				flag:0,
				show:false,
				lists: [],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '輕輕上拉',
					loading: '努力加載中',
					nomore: '實在沒有了'
				},
				list: [],
				page: 1,
				pageSize:10,
				obj_item:{},
				userInfo:{},
				value: 1,
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				'getLangType',
				'getTextArr',
				'getLoginInfo'
			])
		},
		components:{
			tabbar
		},
		onLoad() {
			that = this
		},
		onShow() {
			if(this.getLangType == 'chs'){
				this.flag = 0
			}else{
				this.flag = 1
			}
			that.getUser()
			that.get()
			that.getList()
		},
		onReachBottom() {
			if (that.total <= that.page * that.pageSize){
				this.status = 'nomore';
				return
			} 
			this.status = 'loading';
			let postData
			postData = {
				page:that.page + 1,//第几页（默认第一页）
				limit:that.pageSize,//显示条数（默认10条）
			}
			that.$postAjax('api/Mining/getList',postData,function(res){
				console.log(res,2222)
				that.list = that.list.concat(res.data.data)
				that.page = that.page + 1
				that.status = 'loadmore';
			})
		},
		methods:{
			//截取后10位
			jiequten(e){
				var disName = e;
				var dateLength = disName.length;
				var key = disName.substring(dateLength-10,dateLength);
				return key
			},
			...mapMutations([
				'setGgsxq',
				'setLoginInfo',
				'setLogin',
				'setLoginTime',
				'setLangType',
				'setAreas'
			]),
			submit(){
				console.log(that.value);
				if(that.obj_item.currency == 1){//usdt
					if(Number(that.userInfo.usdt) - (Number(that.value) * Number(that.obj_item.price)) < 0){
						uni.showToast({
							title: 'USDT余额不足',
							icon: 'none'
						});
						return
					}
				}else{//lcc
					if(Number(that.userInfo.lcc) - (Number(that.value) * Number(that.obj_item.price)) < 0){
						uni.showToast({
							title: 'MMST余额不足',
							icon: 'none'
						});
						return
					}
				}
				uni.showLoading({
					mask: true
				});
				let data = {
					id:that.obj_item.id,
					num:that.value,
				}
				that.$postAjax('api/mining/pay_mining',data,function(res){
					uni.hideLoading()
					uni.showToast({
						title: '成功',
						icon: 'none'
					});
					setTimeout(function(){
						that.showtab = false
						that.getList()
						that.getUser()
						that.value = 1
					},500)
				})
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			getUser(){
				that.$postAjax('api/Member/wallet','',function(res){
					console.log(res);
					that.userInfo = res.data
				})
			},
			get(){
				that.$postAjax('api/Mining/index','',function(res){
					console.log(res);
					// 輪播
					let arr = res.data.banner
					arr.map(item=>{
						item.image = that.getRequestUrl + item.pic
					})
					that.lists = arr
				})
			},
			getList(){
				that.status = 'loadmore';
				that.page = 1
				let temp = {
					page:that.page,//第几页（默认第一页）
					limit:that.pageSize,//显示条数（默认10条）
				}
				that.$postAjax('api/Mining/getList',temp,function(res){
					console.log(res);
					// console.log(that.getRequestUrl + res.data.class.pic);
					that.list = res.data.data
					that.total = res.data.total
					if (that.total <= that.page * that.pageSize){
						that.status = 'nomore';
					}
				})
			},
			xuanze1(e){
				console.log(e);
			},
			goumai(it){
				that.showtab = !that.showtab
				that.obj_item = it
			},
			dianji(e){
				that.flag = e
				that.show = !that.show
				if(e == 0){
					this.setLangType('chs')
					this.$i18n.locale = 'chs'
					console.log('设置中文');
				}else if(e == 1){
					this.setLangType('en')
					this.$i18n.locale = 'en'
					console.log('设置英文');
				}
				that.getUser()
				that.get()
				that.getList()
			},
			geTel(tel){
			    var reg = /^(\d{3})\d{4}(\d{4})$/;  
			    return tel.replace(reg, "$1****$2");
			},
			pageto(url, pp) {
				pageto(url, pp);
			},
		}
	}
</script>

<style lang="scss">
	.yuan{
		width: 18rpx;
		height: 18rpx;
		background: linear-gradient(0deg, #FFCA7F 0%, #FFA54A 100%);
		border-radius: 50%;
	}
	.middle{
		background: #FFFFFF;
		box-shadow: 0px 0px 31rpx 1rpx rgba(15,6,10,0.13);
		border-radius: 20rpx;
		padding: 50rpx 20rpx;
	}
	.btn1{
		position: absolute;
		left: 0;
		top: 0;
		padding: 15rpx 50rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #fff;
		border-radius: 20rpx 0 20rpx 0;
	}
	.bg1{background: #FEC94F;}
	.bg2{background: #18376F;}
	.bg3{background: #FF6D33;}
	.one1{
		padding: 30rpx 20rpx 0rpx;
		position: absolute;
		left: 0;
		top: 80rpx;
		z-index: 999;
	}
</style>